@import '../../../core/index.less';
.orin-sw-respinner-root {
    width: 400 / @remScale;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 4 / @remScale;
    overflow: hidden;
    background: #fff;
    .title-box {
        height: 50 / @remScale;
        line-height: 50 / @remScale;
        background: #fff;
        position: relative;
        padding-left: 20 / @remScale;
        font-size: 18 / @remScale;
        color: @blackColor;
        .spinner-close {
            position: absolute;
            right: 20 / @remScale;
            top: 50%;
            margin-top: -10px;
            cursor: pointer;
            &:after, &:before {
                background: @cancelBtnColor;
            }
        }
    }
    .content-box {
        background: @greyBgColor;
        min-height: 160 / @remScale;
        text-align: center;
        font-size: 16 / @remScale;
        display: flex;
        justify-content: center;
        align-items: center;
        color: @blackColor;
        .dialog-box {}
        .circular-box {
            .circular {
                width: 60 / @remScale;
                height: 60 / @remScale;
                animation: loading-rotate 2s linear infinite;
                .path {
                    animation: loading-dash 1.5s ease-in-out infinite;
                    stroke-dasharray: 90, 150;
                    stroke-dashoffset: 0;
                    stroke-width: 2;
                    stroke: @mainColor;
                    stroke-linecap: round;
                }
            }
        }
        .success-box {
            .success-icon {
                color: @mainColor;
                width: 60 / @remScale;
                height: 60 / @remScale;
            }
            .success-text {}
        }
        .error-box {
            .error-icon {
                color: @errorColor;
                width: 60 / @remScale;
                height: 60 / @remScale;
            }
        }
    }
    .footer-box {
        .btn-box {
            text-align: center;
            padding: 15 / @remScale 0;
            background: #fff;
            .dialog-btn {
                width: 110 / @remScale;
                height: 40 / @remScale;
                &:first-child {
                    margin-right: 20 / @remScale;
                    color: @blackColor;
                    background: @cancelBtnColor;
                    &:hover {
                        background: @cancelBtnColorHover;
                    }
                }
                &.disable-style {
                    background: @disabledBgColor;
                    color: @disabledFontColor;
                    &:hover {
                        background: @disabledBgColor;
                    }
                }
            }
        }
    }
}

.spinner-modal {
    .orin-sw-remodal-wrapper {
        background: transparent;
    }
}

@keyframes loading-rotate {
    to {
        transform: rotate(1turn)
    }
}

@keyframes loading-dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -40px
    }
    to {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -120px
    }
}

.orin-sw-redialog-root {
    .orin-sw-remodal-root {
        &.hide-mask {
            visibility: hidden;
        }
        .orin-sw-remodal-wrapper {
            background-color: transparent;
            visibility: visible;
        }
    }
    .wrapper {
        display: block;
        min-width: 400/@remScale;
        height: auto;
    }
    .orin-sw-reiconbutton-root {
        margin-right: -8/@remScale;
        .icon-box {
            width: 16/@remScale;
            height: 16/@remScale;
        }
    }
}

.theme-write {
    .orin-sw-redialog-root {
        .footer-btn-group {
            padding: 15/@remScale 0;
            text-align: center;
            background-color: #fff;
            .dialog-btn {
                height: 40/@remScale;
                line-height: 40/@remScale;
                margin: 0 10/@remScale;
            }
        }
        .dialog-content {
            min-height: 160/@remScale;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            vertical-align: middle;
            > div {
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
                vertical-align: middle;
            }
        }
        .dialog-btn {
            width: 110 / @remScale;
            height: 40 / @remScale;
            &:first-child {
                margin-right: 20 / @remScale;
                background: @greyBtnColor;
                color: @borderColor;
                &:hover {
                    background: @greyBtnColorHover;
                }
            }
            &.delete {
                background-color: #f81e3d;
                &:hover {
                    background-color: #c5142e;
                }
            }
            &.disabled {
                background-color: #ddd;
                color: #b6b6b6;
                &:hover,
                &:active {
                    background: #ddd;
                    color: #aaa;
                }
            }
        }
    }
}

.theme-dark {
    .orin-sw-redialog-root {
        .orin-sl-repanel-root {
            box-shadow: 0px 8px 10px 0 rgba(0, 0, 0, 0.4);
        }
        .footer-btn-group {
            padding: 15/@remScale 0;
            text-align: center;
            background-color: @dark_bgColor;
            .dialog-btn {
                height: 40/@remScale;
                line-height: 40/@remScale;
                margin: 0 10/@remScale;
            }
        }
    }
}
